<div mdui-headroom class="mdui-appbar" style="position: fixed; top: 0; left: 0; right: 0;">
    <div class="mdui-toolbar mdui-color-theme">

        <a href="{% url 'dashboard-index' %}" class="mdui-typo-headline">商品库存</a>
        <div class="mdui-toolbar-spacer"></div>

        {% if request.user.is_authenticated %}
        
        <a href="{% url 'user-profile'%}" mdui-tooltip="{content: '统计面板'}" class="mdui-btn mdui-btn-icon mdui-ripple">
            <i class="mdui-icon material-icons">assessment</i>
        </a>

        <a href="{% url 'user-profile'%}" mdui-tooltip="{content: '个人信息'}" class="mdui-btn mdui-btn-icon mdui-ripple">
            <i class="mdui-icon material-icons">account_circle</i>
        </a>

        <a href="/admin" mdui-tooltip="{content: '管理后台'}" class="mdui-btn mdui-btn-icon mdui-ripple">
            <i class="mdui-icon material-icons">dashboard</i>
        </a>

        <a href="#" mdui-tooltip="{content: '登出'}" class="mdui-btn mdui-btn-icon mdui-ripple" onclick="logout()">
            <i class="mdui-icon material-icons">exit_to_app</i>
        </a>

        <form id="logout-form" action="{% url 'user-logout' %}" method="post" style="display: none;">
            {% csrf_token %}
        </form>

        <script>
            function logout() {
            var form = document.getElementById('logout-form');
            form.submit();
        }
        </script>
        

        {% else %}

        <a href="{% url 'user-register'%}" mdui-tooltip="{content: '注册'}" class="mdui-btn mdui-btn-icon mdui-ripple">
            <i class="mdui-icon material-icons">person_add</i>
        </a>

        <a href="{% url 'user-login'%}" mdui-tooltip="{content: '登入'}" class="mdui-btn mdui-btn-icon mdui-ripple">
            <i class="mdui-icon material-icons">person</i>
        </a>
        {% endif %}
    </div>
</div>